001 · saas b2b↗
Collaborative Perks
Rediseño del flujo de beneficios sobre un sistema de componentes compartido entre tres squads.
saas · design system · squads
Un solo color de acento, el resto neutro. La jerarquía viene de la tipografía y el espacio — nunca del color decorativo.
Space Grotesk para titulares — técnica y con carácter. Inter para el cuerpo — silenciosa y muy legible. Escala fluida con clamp(). Longitud máxima de línea: 70 caracteres.
Nunca inventar valores fuera de la escala.
Cards 24 · botones pill.
Solo dos sombras · ≤250ms ease-out.
Fade · translateY · scale 1.02. Sin rebotes, giros ni parallax.
Listos para :root. El modo oscuro sobreescribe los mismos nombres bajo [data-theme="dark"].
:root {
/* escala neutra */
--bg:#FCFCFC; --surface:#FFFFFF;
--text:#111111; --text-2:#5F6368; --text-muted:#70747C;
--border:#E8EAED; --divider:#F1F3F4;
/* acento — el único color */
--accent:#5B5CEB; --accent-hover:#4E50D8; --accent-soft:#F4F3FF;
/* estado */
--success:#16A34A; --warning:#CA8A04; --error:#DC2626;
/* tipografía */
--font-heading:'Space Grotesk', sans-serif;
--font-body:'Inter', system-ui, sans-serif;
/* radios */
--r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
/* espaciado (8pt) */
--s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
--s-6:48px; --s-7:64px; --s-8:80px; --s-9:96px; --s-10:128px;
/* elevación y movimiento */
--shadow-01:0 1px 2px rgba(17,17,17,.05), 0 2px 8px rgba(17,17,17,.04);
--shadow-02:0 12px 40px -12px rgba(17,17,17,.14);
--duration:250ms; --easing:ease-out;
--container:1280px;
}
:root[data-theme="dark"] {
--bg:#0A0A0D; --surface:#111114;
--text:#F4F4F5; --text-2:#A1A1AA; --text-muted:#9A9AA3;
--border:#232329; --divider:#1B1B20;
--accent:#6E70F0; --accent-hover:#8486F4; --accent-soft:#17172B;
}
Una responsabilidad por componente. Componer interfaces — nunca construir secciones monolíticas. Cada bloque es una demo en vivo del markup final.
Etiqueta mono, titular y un único párrafo de apoyo — limitado a 600px para que cada sección se lea en menos de un minuto.
Wordmarks monocromos · altura uniforme · protagonismo bajo.
La consistencia es una feature del producto, no una preferencia visual.
Si no hay datos medibles, se elimina el componente — nunca inventar números.
Los usuarios abandonaban el checkout en el paso de dirección.
Dividir el formulario en dos pasos progresivos.
Menos campos visibles reducen el esfuerzo percibido.
La finalización mejoró sin añadir fricción.
Librería de componentes legacy, sin capa de theming.
Los patrones nuevos debían reutilizar primitivas existentes.
Introducir tokens sobre la base legacy.
Publicar los tokens pronto alineó a tres squads antes de lo esperado.
Migrar pantallas legacy sin bloquear releases.
Documentar las reglas de gobernanza antes de escalar la adopción.